<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
            display: none;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- .adver-wrapper>(.adver-header>.adver-tips+.adver-close)+.adver-main -->
    <!-- <div class="adver-wrapper">
        <div class="adver-header">
            <div class="adver-tips">距离广告关闭还有10秒</div>
            <div class="adver-close">x</div>
        </div>
        <div class="adver-main">
            <a href="">
                <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
            </a>
        </div>
    </div> -->
</body>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3

    var adverWrapper = document.getElementsByClassName("adver-wrapper")[0];
    var adverTips = document.getElementsByClassName("adver-tips")[0];
    var adverClose = document.getElementsByClassName("adver-close")[0];

    var timer1 = null; // 全局变量 记录延时器的编号
    var timer2 = null; // 全局变量 记录计时器的编号
    var isSkip = false;

    adverLoop();

    adverClose.onclick = function () {
        clearTimeout(timer1);
        clearInterval(timer2);
        adverWrapper.style.display = "none";

        adverLoop();

        if (isSkip == true) return false;
        window.open("https://www.baidu.com");  //跳转
        isSkip = true; // 改状态
    }

    function adverLoop(delayTime) {
        // 参数默认值:  判断是否传参 没有参数就使用默认值 有参数就使用该参数
        delayTime = (delayTime == undefined) ? 5000 : delayTime;
        // delayTime = delayTime || 5000;

        // 延迟5后 小广告显示开启倒计时
        // 1. 延迟的5s内 小广告是隐藏的 -> 没有办法点击close按钮 -> 无法清除
        // 2. 5s后小广告显示 -> 开启倒计时 -> 此时可以清除延时器,但是计时器已经启动了-> 计时器倒计时结束之后还会递归调用原函数 -> 也无法完全层出

        timer1 = setTimeout(function () {
            adverWrapper.style.display = "block";

            var count = 10;
            adverTips.innerText = `距离广告关闭还有${count}秒`;
            timer2 = setInterval(function () {
                count--;
                adverTips.innerText = `距离广告关闭还有${count}秒`;
                if (count == 0) {
                    clearInterval(timer2);
                    adverWrapper.style.display = "none";
                    adverLoop(delayTime);
                }
            }, 1000)
        }, delayTime);
    }


</script>

</html>